'use client'

import LazyImage from '@/components/LazyImage';
import React from 'react'
import MediaCarousel from './MediaCarousel';
import { usePageData } from '@/hooks/usePageData';
import PageRenderer from '@/components/PageRenderer';

export default function OrganicTeaContent() {
    const { components, loading, error, refetch } = usePageData(4);


    return (
        <div className='m-auto min-w-[300px] max-w-[100%]'>
            <PageRenderer
                components={components}
                loading={loading}
                error={error}
                onRetry={refetch}
                className="w-full"
                itemClassName="w-full"
            />

            {/* Video Carousel */}
            <MediaCarousel width="84%" items={[
                {
                    src: "https://pub-d9c5812daa2b44e5b6d7b6621bbeb301.r2.dev/bai-hao-ying-zheng.mp4",
                    type: "video",
                    poster: "https://pub-d9c5812daa2b44e5b6d7b6621bbeb301.r2.dev/images/good-tea_a.jpg"
                },
                {
                    src: "https://pub-d9c5812daa2b44e5b6d7b6621bbeb301.r2.dev/gong-mei.mp4",
                    type: "video",
                    poster: "https://pub-d9c5812daa2b44e5b6d7b6621bbeb301.r2.dev/images/good-tea_b.jpg"
                }
            ]} />
        </div>
    )
}